<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
       <div class="zuida">
        <div class="zuobian">
            <div class="zuoshang">
                <div class="zuoshang-text">
                    校园风光
                    <div class="subtitle">XIAO YUAN FNEG GUANG</div>
                </div>
            </div>
            <div class="zuoxia">
                <img src="https://www.pdsu.edu.cn/images/fgt12.jpg" alt="左侧下方图片">
            </div>
        </div>
        <div class="zhongyoushang">
            <div class="dazhongzuo">
                <img src="https://www.pdsu.edu.cn/images/fgt11.jpg" alt="右侧上方左图片">
            </div>
            <div class="dazhong">
                <div class="dazhong-text">
                    <div class="main-text">学术研究</div>
                    <div class="sub-text">XUE SHU YAN JIU</div>
                </div>
            </div>
            <div class="dazhongyou">
                <img src="https://www.pdsu.edu.cn/images/1.JPG" alt="右侧上方右图片">
            </div>
        </div>
        <div class="zhongyouxia">
            <div class="xiaozhongzuo">
                <div class="xiaozhongzuo-text">
                    <div class="title">学生活动</div>
                    <div class="desc">XUE SHENG HUO DONG</div>
                </div>
            </div>
            <div class="xiaozhongyou">
                <img src="https://www.pdsu.edu.cn/images/fgt13.jpg" alt="右侧下方中图片">
            </div>
            <div class="xiaozhong">
                <img src="https://www.pdsu.edu.cn/images/fgt14.jpg" alt="右侧下方右图片">
            </div>
        </div>
    </div>
</body>

<style>
 
    .zuida {
        width: 1200px;
        height: 400px;
        background-color: blueviolet;

    }

    .zuobian {
        width: 350px;
        height: 400px;
        background-color: red;
        float: left;
    }

    .zuoshang {
        width: 350px;
        height: 170px;
        background-color: black;
    }
        .zuoshang-text {
            color: white;
            font-size: 26px;
            font-weight: 600;
            text-align: center;
            padding-top: 50px;
            padding-right: 150px;
            box-sizing: border-box;
            /* 3. 单独设置该区域字体（可选，覆盖全局设置） */
             font-family: "微软雅黑", sans-serif; 
        }

        .subtitle {
            font-size: 10px;
            margin-top: 10px;
            padding-left: 43px;
            letter-spacing: 1px;
        }

    .zuoxia {
        width: 350px;
        height: 230px;
        background-color: aquamarine;
    }

    .zuoxia img {
        width: 350px;
        height: 230px;
        object-fit: fill;
    }

    .zhongyoushang {
        width: 850px;
        height: 250px;
        background-color: blue;
        float: left;

    }

    .dazhongzuo {
        width: 500px;
        height: 250px;
        background-color: beige;
        float: left;
    }
.dazhongzuo img{
    width: 500px;
    height: 250px;
    object-fit: fill;
}
    .dazhong {
        width: 150px;
        height: 250px;
        background-color: brown;
        float: left;
    }
        .dazhong-text {
         font-size: 35px;
            writing-mode: vertical-rl;
            margin: 0 auto;
            line-height: 0;
            padding-left: 50px;
            float: left;
        }
.main-text {
            padding-left: 60px;
            color: #800000;
            text-align: center;
            padding-top: 30px;
            float: left;
        }
   /* .main-text {
            font-size: 22px;
            writing-mode: vertical-rl;
            margin: 0 auto;
            line-height: 30px;
            float: left;
        }*/

        .dazhong-text .sub-text {
            font-size: 9px;
            padding-left: 20px;
            writing-mode: vertical-rl;
            margin: 40px auto 0;
        }

    .dazhongyou {
        width: 200px;
        height: 250px;
        background-color: crimson;
        float: left;
    }
.dazhongyou img{
    width: 200px;
    height: 250px;
    object-fit: fill;
}
    .zhongyouxia {
        width: 850px;
        height: 150px;
        background-color: darkgreen;
        float: left;

    }

    .xiaozhongzuo {
        width: 283px;
        height: 150px;
        background-color: fuchsia;
        float: left;
    }
        .xiaozhongzuo-text {
            width: 100%;
            height: 100%;
            color: #f0f0f0;
            text-align: center;
            padding-top: 35px;
            box-sizing: border-box;
        }

        .xiaozhongzuo-text .title {
            font-size: 20px;
            font-weight: bold;
        }

        .xiaozhongzuo-text .desc {
            font-size: 13px;
            margin-top: 8px;
        }
    .xiaozhong {
        width: 283px;
        height: 150px;
        background-color: green;
        float: left;
    }
    .xiaozhong img{
        width: 283px;
        height: 150px;
        object-fit: fill;
    }
    .xiaozhongyou {
        width: 283px;
        height: 150px;
        background-color: khaki;
        float: left;
    }
    .xiaozhongyou img{
        width: 283px;
        height: 150px;
        object-fit: fill;
    }
</style>

</html>